<template>
  <div ref="barLine"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'BarLine',
  data() {
    return {
      echarts: null,
      option: {
        // 缩放配置
        dataZoom: [
          {
            // type: 'slider',
            type: 'inside',
          }
        ],
        // 标题配置
        title: [
          {
            text: '流量/浑浊度分析',
            textStyle: {
              color: '#5470c6',
              fontSize: 12
            },
            borderWidth: 1,
            borderColor: '#5470c6',
            borderRadius: 10,
            padding: 10,
            left: 20
          }
        ],
        // 网格设置
        grid: {
          show: true,
          top: 80
        },
        // 提示设置
        tooltip: {
          show: true,
          // 触发类型
          trigger: 'item', // item/axis
          // 触发时机
          triggerOn: 'mousemove', // mouseover/click
          // 自定义提示框内容
          // formatter: '{b}:{c}',
          formatter(params) {
            if (params.componentType === 'series')
              return `${params.seriesName}<br/>${params.marker}${params.name} : <b>${params.value}</b>`
            else if (['markLine', 'markPoint'].find(i => i === params.componentType))
              return `${params.name} : <b>${params.value}</b>`
            return `${params.name}`
          }
        },
        // 工具设置
        toolbox: {
          right: 20,
          feature: {
            // 保存为图片
            saveAsImage: {},
            // 图表切换
            magicType: {
              type: ['bar', 'line']
            }
          }
        },
        legend: {
          // 如果不填data，默认显示所有系列
          // data: ['流量', '浑浊度'] // 系列name对应
        },
        // x轴配置
        xAxis: {
          name: '月份',
          type: 'category',
          // 强制显示所有类目
          axisLabel: {
            interval: 0
          },
          axisTick: {
            // 坐标轴刻度在类目中央
            alignWithLabel: true
          },
          // 取消间隔
          boundaryGap: true,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        // y轴配置
        yAxis: {
          name: '流量/浑浊度',
          type: 'value'
        },
        // 系列配置
        series: [
          {
            type: 'bar',
            name: '流量',
            // 标记线
            markLine: {
              data: [{type: 'average', name: '流量平均值'}]
            },
            // 标记区域
            markArea: {
              data: [
                [{name: '夏季流量大，浑浊度低', xAxis: '6月'}, {xAxis: '8月'}],
                [{name: '冬季流量低，浑浊度低', xAxis: '11月'}, {xAxis: '12月'}]
              ]
            },
            // 数据值展示
            label: {
              show: true,
              position: 'inside',
              rotate: 30
            },
            data: [10, 20, 30, 50, 60, 80, 120, 80, 40, 80, 20, 10]
          },
          {
            name: '浑浊度',
            type: 'line',
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: '浑浊度平均值'}]
            },
            // 平滑效果
            // smooth: true,
            lineStyle: {},
            data: [10, 40, 120, 70, 60, 15, 8, 18, 6, 90, 3, 12]
          }
        ]
      }
    }
  },
  mounted() {
    this.echarts = echarts.init(this.$refs.barLine)
    this.echarts.setOption(this.option)
  }
}
</script>
